<template>
	<view class="my-tips">
		<view v-if="showResult" class="wrapper">
		  <view class="block" >
			  <view class="top-bg">
			 </view>
			 <view class="title"> {{title}}</view>
			  <view class="tips">
				  {{tipsInfo }}
			  </view>
			  <view @click="showResult = false" class="btn">知道了</view>
		  </view>
		</view>
	</view>
	
	
</template>

<script>
	export default {
		props: {
			title: {
				 type: String,
				 default: '房东注意事项'
			}
		},
		 data() {
			 return {
				 showResult: false,
				 tipsInfo: ''
				  
		    }
		},
		methods: {
			 showDialog(data) {
				 this.showResult = true;
				 this.tipsInfo = data;
			 }
		}
	}
</script>

<style scoped lang="scss">
	.my-tips {
		display: inline-block;
	}
	
	.wrapper {
		 position: fixed;
		 left: 0;
		 top: 0;
		 z-index: 999999999;
	     display: flex;
         align-items: center;
          justify-content: center;
          height: 100%;
	   	width: 100%;
		 background-color: rgba(0,0,0,0.3);
	 }
		
	 .block {
			  width: 630rpx;
			  min-height: 375rpx;
			  padding-bottom: 30rpx ;
			  background: #FFFFFF;
			  border-radius: 20rpx;
			  z-index: 99999999;
			  position: absolute;
			  text-align: center;
			  top: 50%;
			  left: 50%;
			  transform: translate(-50%, -50%);
			  .top-bg {
				  width: 100%;
				  height: 100rpx;
				  background: linear-gradient(to bottom ,rgba(252,227,83,0.3), rgba(252,227,83,0), );
				  // border-radius: 20px 20px 20px 20px;
			  }
			  .title {
				  width: 100%;
				  position: absolute;
				  text-align: center;
				  top: 70rpx;
				  font-weight: bold;
				  font-size: 40rpx;
				  color: #F79925;
			  }
			
			.tips {
				font-size: 32rpx;
				color: #5E5E5E;
				margin-top: 70rpx;
				padding: 0 20rpx;
				
			}
			.btn {
				width: 510rpx;
				height: 90rpx;
				background: #FCE353;
				border-radius: 47rpx;
				margin: 0 auto;
				font-size: 32rpx;
				font-weight: 600;
				color: #222222;
				line-height: 90rpx;
				letter-spacing: 1px;
				margin-top: 50rpx;
			}
	 }
</style>